<script setup>
import { ref } from 'vue';

const config = ref({
  header: [
    '归属分行',
    '协会名称',
    '协会积分',
    '协会人数',
    '活动数量',
    '论坛发布量',
  ],
  data: [
    ['北京分行', '科技创新组', '100', '120', '45', '78'],
    ['上海分行', '金融研究组', '100', '98', '36', '65'],
    ['广州分行', '金融研究组', '100', '156', '52', '92'],
    ['深圳分行', '金融研究组', '100', '134', '48', '85'],
    ['成都分行', '金融研究组', '100', '89', '32', '58'],
    ['北京分行', '科技创新组', '100', '120', '45', '78'],
    ['上海分行', '金融研究组', '100', '98', '36', '65'],
    ['广州分行', '金融研究组', '100', '156', '52', '92'],
    ['深圳分行', '金融研究组', '100', '134', '48', '85'],
    ['成都分行', '金融研究组', '100', '89', '32', '58'],
    ['北京分行', '科技创新组', '100', '120', '45', '78'],
    ['上海分行', '金融研究组', '100', '98', '36', '65'],
    ['广州分行', '金融研究组', '100', '156', '52', '92'],
    ['深圳分行', '金融研究组', '100', '134', '48', '85'],
    ['成都分行', '金融研究组', '100', '89', '32', '58'],
  ],
  align: ['center', 'center', 'center', 'center', 'center', 'center', 'center'],
  headerBGColor: '#0f1325',
  columnWidth: [80],
  index: true,
  headerHeight: 35,
  rowNum: 8,
});
</script>

<template>
  <dv-border-box-13 class="box">
    <div class="title">使用情况(各协会)</div>
    <dv-scroll-board
      :config="config"
      style="width: 100%; height: calc(100% - 50px)"
    />
  </dv-border-box-13>
</template>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  padding: 15px 20px 10px 20px;
  box-sizing: border-box;

  .title {
    color: #fff;
    font-size: 16px;
    margin-bottom: 16px;
    width: 100%;
    margin: 5px 0;
    text-align: center;
  }
}
</style>
